<template>
    <div class="container">
        <div class="operation-content">
            <div>
                <el-page-header @back="closeWindow" content="新增人员" />
            </div>
            <div>
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <input ref="fileInput" type="file" accept="image/*" style="display: none" @change="onFileChange" />
            </div>
        </div>
        <div class="form-content">
            <table class="table-class" border="0" cellspacing="0" cellpadding="0">
                <tr class="tr-class">
                    <td class="td-class picture-class" style="padding: 0; color: #657180" rowspan="4">
                        <div v-show="form.picture == ''" class="user-uploader-class" @click="uploadPic('0')">
                            上传照片
                        </div>
                        <div v-show="form.picture != ''" class="user-uploader-class" @click="uploadPic('0')">
                            <img :src="pictureUrl" />
                        </div>
                    </td>
                    <td class="td-class label-class">工号</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.employeeNo" class="form-input-class" placeholder="请输入工号" />
                    </td>
                    <td class="td-class label-class">姓名</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.name" class="form-input-class" placeholder="请输入姓名" />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">性别</td>
                    <td class="td-class content-class">
                        <el-select v-model="form.gender" class="form-input-class" placeholder="请选择">
                            <el-option
                                v-for="item in genders"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </td>
                    <td class="td-class label-class">出生日期</td>
                    <td class="td-class content-class">
                        <el-date-picker
                            v-model="form.birthDate"
                            type="date"
                            value-format="YYYY-MM-DD"
                            class="form-input-class"
                            placeholder="选择日期"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">身份证号</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.idCardNo" placeholder="请输入身份证号" />
                    </td>
                    <td class="td-class label-class">学历</td>
                    <td class="td-class content-class">
                        <el-select v-model="form.educationCode" class="form-input-class" placeholder="请选择">
                            <el-option
                                v-for="item in educations"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">电话</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.phone" placeholder="请输入电话" />
                    </td>
                    <td class="td-class label-class">工作邮箱</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.email" placeholder="请输入工作邮箱" />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class td-label-class" rowspan="5">单位信息</td>
                    <td class="td-class label-class">所属部门</td>
                    <td class="td-class content-class">
                        <el-input
                            v-model="form.departmentName"
                            class="form-input-class"
                            placeholder="点击选择"
                            readonly
                            @click="chooseDepart"
                        />
                    </td>
                    <td class="td-class label-class">人员类型</td>
                    <td class="td-class content-class">
                        <el-select v-model="form.kindCode" class="form-input-class" placeholder="请选择">
                            <el-option
                                v-for="item in kinds"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">岗位</td>
                    <td class="td-class content-class">
                        <el-select v-model="form.postCode" class="form-input-class" placeholder="请选择">
                            <el-option
                                v-for="item in posts"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </td>
                    <td class="td-class label-class">职称</td>
                    <td class="td-class content-class">
                        <el-select v-model="form.professionalTitleCode" class="form-input-class" placeholder="请选择">
                            <el-option
                                v-for="item in professionals"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">开始工作时间</td>
                    <td class="td-class content-class">
                        <el-date-picker
                            v-model="form.workDate"
                            type="month"
                            value-format="YYYY-MM"
                            class="form-input-class"
                            placeholder="选择日期"
                        />
                    </td>
                    <td class="td-class label-class"></td>
                    <td class="td-class content-class"></td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">入职时间</td>
                    <td class="td-class content-class">
                        <el-date-picker
                            v-model="form.entryDate"
                            type="date"
                            value-format="YYYY-MM-DD"
                            class="form-input-class"
                            placeholder="选择日期"
                        />
                    </td>
                    <td class="td-class label-class">离职时间</td>
                    <td class="td-class content-class">
                        <el-date-picker
                            v-model="form.resignDate"
                            type="date"
                            value-format="YYYY-MM-DD"
                            class="form-input-class"
                            placeholder="选择日期"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">本期合同签订时间</td>
                    <td class="td-class content-class">
                        <el-date-picker
                            v-model="form.contractAwardDate"
                            type="date"
                            value-format="YYYY-MM-DD"
                            class="form-input-class"
                            placeholder="选择日期"
                        />
                    </td>
                    <td class="td-class label-class">本期合同到期时间</td>
                    <td class="td-class content-class">
                        <el-date-picker
                            v-model="form.contractExpireDate"
                            type="date"
                            value-format="YYYY-MM-DD"
                            class="form-input-class"
                            placeholder="选择日期"
                        />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class td-label-class">身份证照片</td>
                    <td class="td-class" colspan="4">
                        <div class="file-content-class">
                            <div v-show="idCardFrontPicUrl == ''" class="uploader-class" @click="uploadPic('1')">
                                上传正面
                            </div>
                            <div
                                v-show="idCardFrontPicUrl != ''"
                                class="image-class"
                                @contextmenu.prevent="previewFile(idCardFrontPicUrl)"
                                @click="uploadPic('1')"
                            >
                                <img :src="idCardFrontPicUrl" />
                            </div>
                            <div v-show="idCardBehindPicUrl == ''" class="uploader-class" @click="uploadPic('2')">
                                上传背面
                            </div>
                            <div
                                v-show="idCardBehindPicUrl != ''"
                                class="image-class"
                                @contextmenu.prevent="previewFile(idCardBehindPicUrl)"
                                @click="uploadPic('2')"
                            >
                                <img :src="idCardBehindPicUrl" />
                            </div>
                        </div>
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class td-label-class">学历证书</td>
                    <td class="td-class" colspan="4">
                        <div style="padding: 10px">
                            <el-upload
                                class="upload-demo"
                                :action="uploadUrl"
                                :headers="uploadHeaders"
                                :on-success="onFileUploadSuccess1"
                                :show-file-list="false"
                            >
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </div>
                        <el-table ref="datagrid" :data="form.eduCerts">
                            <el-table-column type="index" width="80" label="序号" />
                            <el-table-column prop="fileName" label="文件名" />
                            <el-table-column label="学历" width="150">
                                <template #default="scope">
                                    <el-select v-model="scope.row.typeCode" placeholder="请选择" style="width: 100%">
                                        <el-option
                                            v-for="item in educations"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="毕业院校">
                                <template #default="scope">
                                    <el-input v-model="scope.row.columnSp1" placeholder="请输入" style="width: 100%" />
                                </template>
                            </el-table-column>
                            <el-table-column label="毕业专业">
                                <template #default="scope">
                                    <el-input v-model="scope.row.columnSp2" placeholder="请输入" style="width: 100%" />
                                </template>
                            </el-table-column>
                            <el-table-column label="毕业年月" width="150">
                                <template #default="scope">
                                    <el-date-picker
                                        v-model="scope.row.acqDate"
                                        type="month"
                                        value-format="YYYY-MM"
                                        placeholder="选择日期"
                                    />
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="140">
                                <template #default="scope">
                                    <el-button @click="handlePreview(scope.row)" size="small">预览</el-button>
                                    <el-button @click.prevent="handleRemove(scope.$index, form.eduCerts)" size="small">
                                        移除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class td-label-class">资格证书</td>
                    <td class="td-class" colspan="4">
                        <div style="padding: 10px">
                            <el-upload
                                class="upload-demo"
                                :action="uploadUrl"
                                :headers="uploadHeaders"
                                :on-success="onFileUploadSuccess2"
                                :show-file-list="false"
                            >
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </div>
                        <el-table ref="datagrid" :data="form.quaCerts">
                            <el-table-column type="index" width="80" label="序号" />
                            <el-table-column prop="fileName" label="文件名" />
                            <el-table-column label="证书类型">
                                <template #default="scope">
                                    <el-select v-model="scope.row.typeCode" style="width: 100%" placeholder="请选择">
                                        <el-option
                                            v-for="item in certs"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="取得时间">
                                <template #default="scope">
                                    <el-date-picker
                                        v-model="scope.row.acqDate"
                                        type="date"
                                        value-format="YYYY-MM-DD"
                                        placeholder="选择日期"
                                    />
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="140">
                                <template #default="scope">
                                    <el-button @click="handlePreview(scope.row)" size="small">预览</el-button>
                                    <el-button @click.prevent="handleRemove(scope.$index, form.quaCerts)" size="small">
                                        移除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class td-label-class">职称证书</td>
                    <td class="td-class" colspan="4">
                        <div style="padding: 10px">
                            <el-upload
                                class="upload-demo"
                                :action="uploadUrl"
                                :headers="uploadHeaders"
                                :on-success="onFileUploadSuccess3"
                                :show-file-list="false"
                            >
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </div>
                        <el-table ref="datagrid" :data="form.proCerts">
                            <el-table-column type="index" width="80" label="序号" />
                            <el-table-column prop="fileName" label="文件名" />
                            <el-table-column label="证书类型">
                                <template #default="scope">
                                    <el-select v-model="scope.row.typeCode" style="width: 100%" placeholder="请选择">
                                        <el-option
                                            v-for="item in professionals"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="取得时间">
                                <template #default="scope">
                                    <el-date-picker
                                        v-model="scope.row.acqDate"
                                        type="date"
                                        value-format="YYYY-MM-DD"
                                        placeholder="选择日期"
                                    />
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="140">
                                <template #default="scope">
                                    <el-button @click="handlePreview(scope.row)" size="small">预览</el-button>
                                    <el-button @click.prevent="handleRemove(scope.$index, form.proCerts)" size="small">
                                        移除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </td>
                </tr>
            </table>
        </div>
        <el-dialog
            width="400px"
            top="20vh"
            title="部门"
            v-model="showDepartment"
            :lock-scroll="true"
            :close-on-click-modal="false"
        >
            <div class="tree-dialog-content">
                <department-tree @select="treeSelected"></department-tree>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { ref, toRefs, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import DepartmentTree from '@/components/bas/DepartmentTree.vue'
import http from '@/http.js'
import optionUtil from '@/utils/option.js'

export default {
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    components: {
        DepartmentTree
    },
    emits: ['close'],
    setup(props, ctx) {
        const fileInput = ref(null)

        const state = reactive({
            form: {
                id: '',
                username: '',
                employeeNo: '',
                name: '',
                gender: 1,
                picture: '',
                birthDate: '',
                idCardNo: '',
                idCardFrontPic: '',
                idCardBehindPic: '',
                age: '',
                educationCode: '',
                educationName: '',
                phone: '',
                email: '',
                departmentId: '',
                departmentCode: '',
                departmentName: '',
                postCode: '',
                postName: '',
                professionalTitleCode: '',
                professionalTitleName: '',
                kindCode: '',
                kindName: '',
                workDate: '',
                entryDate: '',
                contractAwardDate: '',
                contractExpireDate: '',
                resignDate: '',
                eduCerts: [],
                quaCerts: [],
                proCerts: []
            },
            pictureUrl: '',
            idCardFrontPicUrl: '',
            idCardBehindPicUrl: '',
            uploadUrl: import.meta.env.VITE_API_URL + '/sys/file/upload',
            uploadHeaders: {
                Authorization: localStorage.getItem('token')
            },
            genders: [
                {
                    label: '男',
                    value: 1
                },
                {
                    label: '女',
                    value: 0
                }
            ],
            educations: [],
            posts: [],
            professionals: [],
            kinds: [],
            certs: [],
            showDepartment: false,
            currentFileType: null
        })

        const closeWindow = () => {
            ctx.emit('close')
        }

        const loadDetail = () => {
            http.fetchForm({
                url: '/bas/employee/queryEmployeeDetail',
                method: 'get',
                data: {
                    id: props.id
                }
            }).then((res) => {
                let data = res.data
                console.log(data)
                if (data.picture != null && data.picture != '') {
                    state.pictureUrl = import.meta.env.VITE_API_URL + '/attachment/' + data.picture
                }
                if (data.eduCerts == null || data.eduCerts == '') {
                    data['eduCerts'] = []
                }
                if (data.quaCerts == null || data.quaCerts == '') {
                    data['quaCerts'] = []
                }
                if (data.proCerts == null || data.proCerts == '') {
                    data['proCerts'] = []
                }
                state.form = data
                if (data.idCardFrontPic != '') {
                    state.idCardFrontPicUrl = import.meta.env.VITE_API_URL + '/attachment/' + data.idCardFrontPic
                }
                if (data.idCardBehindPic != '') {
                    state.idCardBehindPicUrl = import.meta.env.VITE_API_URL + '/attachment/' + data.idCardBehindPic
                }
            })
        }

        const loadOptions = () => {
            http.fetchForm({
                url: '/sys/dictionary/queryByGroups',
                method: 'get',
                data: {
                    groupCodes: 'P-001-001,P-001-002,P-001-003,P-001-004,P-001-005'
                }
            }).then((res) => {
                state.educations = res.data['P-001-001']
                state.certs = res.data['P-001-002']
                state.professionals = res.data['P-001-003']
                state.posts = res.data['P-001-004']
                state.kinds = res.data['P-001-005']
            })
        }

        const chooseDepart = () => {
            state.showDepartment = true
        }

        const treeSelected = (res) => {
            state.form.departmentId = res.id
            state.form.departmentCode = res.code
            state.form.departmentName = res.label
            state.showDepartment = false
        }

        const onSubmit = () => {
            let params = JSON.parse(JSON.stringify(state.form))
            params['username'] = params.employeeNo
            params['educationName'] = optionUtil.findLabelByValue(state.educations, params.educationCode)
            params['postName'] = optionUtil.findLabelByValue(state.posts, params.postCode)
            params['professionalTitleName'] = optionUtil.findLabelByValue(
                state.professionals,
                params.professionalTitleCode
            )
            params['kindName'] = optionUtil.findLabelByValue(state.kinds, params.kindCode)
            http.fetchJson({
                url: '/bas/employee/save',
                data: params
            }).then((res) => {
                ElNotification({
                    title: '提示',
                    message: '保存成功',
                    type: 'success'
                })
                closeWindow()
            })
        }

        const uploadPic = (type) => {
            state.currentFileType = type
            fileInput.value.dispatchEvent(new MouseEvent('click'))
        }

        const onFileChange = () => {
            let fileObj = fileInput.value.files[0]
            if (fileObj) {
                let fd = new FormData()
                fd.append('file', fileObj)
                // 修改请求地址
                http.fetchFile({
                    url: '/sys/file/upload',
                    method: 'post',
                    data: fd
                }).then((res) => {
                    ElNotification({
                        title: '提示',
                        message: '上传成功',
                        type: 'success'
                    })
                    fileInput.value.value = ''
                    onUploadSuccess(res)
                })
            } else {
                return
            }
        }

        const onUploadSuccess = (res) => {
            if (state.currentFileType == '0') {
                state.form.picture = res.data.storageName
                state.pictureUrl = import.meta.env.VITE_API_URL + '/attachment/' + res.data.storageName
            } else if (state.currentFileType == '1') {
                state.form.idCardFrontPic = res.data.storageName
                state.idCardFrontPicUrl = import.meta.env.VITE_API_URL + '/attachment/' + res.data.storageName
            } else if (state.currentFileType == '2') {
                state.form.idCardBehindPic = res.data.storageName
                state.idCardBehindPicUrl = import.meta.env.VITE_API_URL + '/attachment/' + res.data.storageName
            }
        }

        const previewFile = (url) => {
            window.open(url)
        }

        const handlePreview = (row) => {
            let url = import.meta.env.VITE_API_URL + '/attachment/' + row.storageName
            window.open(url)
        }

        const handleRemove = (index, rows) => {
            rows.splice(index, 1)
        }

        const onFileUploadSuccess1 = (response, file, fileList) => {
            let list = state.form.eduCerts
            let json = {
                category: 0,
                typeCode: '',
                fileName: response.data.fileName,
                storageName: response.data.storageName,
                acqDate: '',
                columnSp1: '',
                columnSp2: '',
                columnSp3: ''
            }
            list.push(json)
            state.form.eduCerts = list
        }

        const onFileUploadSuccess2 = (response, file, fileList) => {
            let list = state.form.quaCerts
            let json = {
                category: 1,
                typeCode: '',
                fileName: response.data.fileName,
                storageName: response.data.storageName,
                acqDate: '',
                columnSp1: '',
                columnSp2: '',
                columnSp3: ''
            }
            list.push(json)
            state.form.quaCerts = list
        }

        const onFileUploadSuccess3 = (response, file, fileList) => {
            let list = state.form.proCerts
            let json = {
                category: 2,
                typeCode: '',
                fileName: response.data.fileName,
                storageName: response.data.storageName,
                acqDate: '',
                columnSp1: '',
                columnSp2: '',
                columnSp3: ''
            }
            list.push(json)
            state.form.proCerts = list
        }

        const guid = () => {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = (Math.random() * 16) | 0,
                    v = c == 'x' ? r : (r & 0x3) | 0x8
                return v.toString(16)
            })
        }

        onMounted(() => {
            if (props.id != '') {
                loadDetail()
            }
            loadOptions()
        })

        return {
            fileInput,
            ...toRefs(state),
            closeWindow,
            chooseDepart,
            treeSelected,
            onSubmit,
            uploadPic,
            onFileChange,
            previewFile,
            handlePreview,
            handleRemove,
            onFileUploadSuccess1,
            onFileUploadSuccess2,
            onFileUploadSuccess3
        }
    }
}
</script>
<style scoped>
.container {
    width: 100%;
    height: 100%;
}

.operation-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 50px;
    border-bottom: 1px solid #eee;
}

.form-content {
    width: 100%;
    height: calc(100% - 69px);
    padding: 20px 50px;
    overflow: auto;
    overflow-x: hidden;
}

:deep(.el-page-header) {
    line-height: 28px;
}

:deep(.el-page-header__content) {
    font-size: 16px;
}

.table-class {
    width: 100%;
    border: 1px solid #eee;
}

.table-class .tr-class .td-label-class {
    width: 15%;
    padding: 0 10px;
    font-size: 12px;
    color: #657180;
}

.table-class .tr-class .td-class {
    font-size: 12px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.table-class .tr-class .td-class:last-child {
    border-right: none;
}

.table-class .tr-class:last-child .td-class {
    border-bottom: none;
}

.picture-class {
    width: 15%;
    background: #f1f1f1;
    text-align: center;
}

.label-class {
    padding: 0 10px;
    width: 12.5%;
    height: 40px;
    line-height: 40px;
    color: #657180;
}

.content-class {
    padding: 0;
    width: 30%;
    height: 40px;
}

:deep(.el-input__inner) {
    border: none;
    font-size: 12px;
    font-weight: bold;
    border-radius: 0;
}

.form-input-class {
    width: 100%;
}

.tree-dialog-content {
    padding: 10px;
    height: 400px;
    overflow: auto;
    overflow-x: hidden;
}

.uploader-class {
    width: 100px;
    height: 100px;
    background: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    cursor: pointer;
}

.file-content-class {
    width: 100%;
    padding: 10px;
    display: flex;
}

.image-class {
    width: 100px;
    height: 100px;
    background: #f9f9f9;
    margin-right: 10px;
}

.image-class img {
    width: 100%;
    height: 100%;
}

.user-uploader-class {
    width: 100%;
    height: 164px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.user-uploader-class img {
    width: 100%;
    height: 100%;
}

:deep(.el-input__wrapper) {
    box-shadow: none;
}

:deep(.el-page-header) {
    line-height: 28px;
}

:deep(.el-textarea__inner) {
    box-shadow: none;
}

:deep(.el-page-header__content) {
    font-size: 16px;
}

:deep(.el-input__inner) {
    border: none;
    font-size: 14px;
    border-radius: 0;
}

:deep(.el-input__wrapper:hover) {
    box-shadow: none !important;
}

:deep(.el-input.is-focus) {
    box-shadow: none !important;
}

:deep(.el-select .el-input.is-focus) {
    box-shadow: none !important;
}

:deep(.el-select .el-input.is-focus .el-input__wrapper) {
    box-shadow: none !important;
}

:deep(.el-textarea__inner) {
    border: none;
    font-size: 14px;
    border-radius: 0;
}

:deep(.el-date-editor.el-input) {
    width: 100%;
}

:deep(.el-table__fixed-right::before) {
    background-color: none;
}

/* 表格样式 */
:deep(.el-table--border:before) {
    width: 0;
    height: 0px;
}
:deep(.el-table--border:after) {
    width: 0px;
    height: 0px;
}

:deep(.el-table__inner-wrapper::before) {
    height: 0 !important;
}

:deep(.el-table--border .el-table__inner-wrapper::after) {
    height: 0 !important;
}

:deep(.el-table__border-left-patch) {
    width: 0 !important;
}

/* 去掉数据最后一行下边框 */
:deep(.el-table tr:last-child td.el-table__cell) {
    border-bottom: none !important;
}

/* 去掉标题行最左侧单元格左边框 */
:deep(.el-table--border .el-table__inner-wrapper tr:first-child th:first-child) {
    border-left: none !important;
}

/* 去掉标题行最右侧单元格右边框 */
:deep(.el-table--border .el-table__inner-wrapper tr:first-child th:last-child) {
    border-right: none !important;
}

/* 去掉每行最左侧单元格左边框 */
:deep(.el-table tr td.el-table__cell:first-child) {
    border-left: none !important;
}

/* 去掉每行最右侧单元格右边框 */
:deep(.el-table tr td.el-table__cell:last-child) {
    border-right: none !important;
}
</style>
